<template>
	<pro-table ref="protable" :loadDataUrl="api.getBindUser" rowKey="userId" :columns="columns" :extendParam="extendParam" @selectedRowChange="onSelectChange">
		<template slot="hd-button">
			<a-space :size="8">
				<template v-if="$_has('sys:role:cleRoleUser')">
					<div class="line"></div>
					<a-button type="link" :disabled="selectedRowKeys.length <= 0" @click="showDeleteConfirm(0)">批量取消授权</a-button>
				</template>
				<div class="line"></div>
				<a-button type="link" @click="closePage()">关闭</a-button>
			</a-space>
		</template>
		<template slot="toolbar">
			<a-space :size="10" v-if="$_has('sys:role:setRoleUser')">
				<a-button type="primary" @click="add()">
					<!-- <span class="iconfont icon-add"></span> -->
					<img src="/img/add.png">
					<span>选择用户</span>
				</a-button>
			</a-space>
		</template>
		<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="{ text }">{{ text == 0 ? '启用' : '停用' }}</span>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" title="取消授权" class="del" @click="showDeleteConfirm(1, record)">取消授权</a>
		</span>
		<!-- 添加，编辑 -->
		<role-join-user-modal ref="roleJoinUserModal" @ok="handlerRefresh"></role-join-user-modal>
	</pro-table>
</template>

<script>
import { rowSelection } from '@/mixins';
import { sysManageapi } from '@/api/index.js';
import roleJoinUserModal from './module/roleJoinUserModal';
import { SEXTYPE } from '@/utils/enumeration';
import bus from '@/utils/eventBus';
const columns = [
	{
		title: '所属机构',
		dataIndex: 'orgName',
		key: 'orgName',
		searchInfo: {
			value: 'orgId',
			type: 'select',
			defaultValue: undefined,
			optionlist: []
		}
	},
	// {
	// 	title: '头像',
	// 	dataIndex: 'avatar',
	// 	key: 'avatar',
	// 	align: 'center',
	// 	scopedSlots: {
	// 		customRender: 'avatar'
	// 	}
	// },
	{
		title: '账户',
		dataIndex: 'username',
		key: 'username',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		}
	},
	{
		title: '姓名',
		dataIndex: 'realName',
		key: 'realName',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		}
	},
	{
		title: '部门名称',
		dataIndex: 'deptName',
		key: 'deptName'
	},

	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center',
		width: 100,
		scopedSlots: {
			customRender: 'status'
		},
		searchInfo: {
			type: 'select',
			defaultValue: undefined,
			optionlist: [
				{
					value: 1,
					text: '启用'
				},
				{
					value: 0,
					text: '停用'
				}
			]
		}
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: { customRender: 'operation' },
		// align: 'center',
		width: 200,
		fixed: 'right'
	}
];
export default {
	name: 'roleUserlist',
	mixins: [rowSelection],
	components: {
		roleJoinUserModal
	},
	data() {
		return {
			columns: columns,
			filter: {},
			api: sysManageapi.roleUrl,
			extendParam: {
				roleId: '',
				bindStatus: true
			}
		};
	},
	created() {
		const roleId = this.$route.query && this.$route.query.roleId;
		if (roleId) {
			this.extendParam.roleId = roleId;
		}
		this.columns = this.$_has('sys:role:cleRoleUser') ? columns : columns.splice(0, columns.length - 1);
	},
	methods: {
		/**
		 * @description  刷新列表当前页
		 * @param {Boolean} flag [true]重置刷新 [false] 刷新当前页 默认true
		 */
		handlerRefresh(flag) {
			this.$refs.protable.handlerRefresh(flag);
		},
		/* 确认是否删除 */
		showDeleteConfirm(type, record) {
			let _this = this;
			let title, ids;
			if (type == 0) {
				title = '你确定取消选中的' + this.selectedRowKeys.length + '条数据的授权吗？';
				ids = this.selectedRowKeys.map(item => item);
			} else {
				title = (
					<div>
						你确定要取消
						<span style="color:red;">{record.roleName ? '(' + record.roleName + ')' : ''}</span>
						的授权吗?
					</div>
				);
				ids = [record.userId];
			}
			this.$confirm({
				title: title,
				okText: '确定',
				cancelText: '取消',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					_this.removeRole(ids);
				},
				onCancel() {}
			});
		},
		/**
		 * @description 删除
		 * @param {Array} delIds 需要删除的角色id 数组
		 */
		removeRole(delIds) {
			this.$postAction(sysManageapi.roleUrl.cleRoleUser, {
				roleId: this.extendParam.roleId,
				userIds: delIds
			}).then(res => {
				if (res && res.code == 1) {
					this.$message.success('取消授权成功！');
					this.handlerRefresh();
				}
			});
		},
		/* 添加 */
		add() {
			this.$refs.roleJoinUserModal.show(this.extendParam.roleId);
		},
		//关闭
		closePage() {
			bus.$emit('closePage');
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.ant-btn-blue {
	width: 100px;
	height: 36px;
	border-radius: 20px;
	font-size: 14px;
	span {
		vertical-align: middle;
	}
	.iconfont {
		font-size: 10px;
	}
	.iconfont + span {
		margin-left: 4px;
	}
}
</style>
